<template>
  <div>
    <div class="text-input"
         @mouseenter="onMouseEnter"
         @mouseleave="onMouseLeave">
      <div v-show="!editMode">
        <div :title="value"
             class="text-input-text describe-item"
             :class="textAnimClass">{{label}}：{{ value }}</div>
        <i class="el-icon-edit text-input-icon"></i>
      </div>
      <el-input v-show="editMode"
                v-model="value"
                class="text-input-input"
                :class="inputAnimClass"
                @input="handerinput"
                @blur="onInputBlur" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TextInputValue',
  // model: {
  //   prop: 'value',
  //   event: 'input'
  // },
  props: {
    value: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      editMode: false,
      textAnimClass: '',
      inputAnimClass: ''
    }
  },
  methods: {
    onMouseEnter () {
      this.textAnimClass = 'fadeOut';
      this.inputAnimClass = 'fadeIn';
      this.editMode = true;
    },
    onMouseLeave () {
      this.textAnimClass = 'fadeIn';
      this.inputAnimClass = 'fadeOut';
      this.timer = setTimeout(() => {
        this.editMode = false;
      }, 200);
    },
    onInputBlur () {
      this.editMode = false;
    },
    handerinput (value) {
      this.$emit('input', value)
    },
    beforeDestroy () {
      this.$once("hook:beforeDestroy", () => clearInterval(this.timer));
    },
  }
}
</script>

<style scoped>
.describe-item {
  /* width: 220px; */
  /* padding-right: 30px; */
  display: inline-block;
  white-space: nowrap;
  /* width: 180px; */
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  padding-right: 5px;
  margin-right: 5px;
}
.text-input {
  width: 220px;
  height: 32px;
  line-height: 32px;
  position: relative;
  /* padding-right: 15px; */
  /* margin-right: 15px; */
}
.text-input-icon {
  /* position: absolute;
  top: 0;
  left: 10px;
  width: 100%;
  height: 100%;
  line-height: 32px;
  text-align: right; */
  font-size: 14px;
  transition: all 0.3s;
  color: var(--prev-color-primary);
  opacity: 1;
}
.text-input-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  transition: all 0.3s;
  opacity: 1;
}
.text-input-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 14px;
  transition: all 0.3s;
  opacity: 0;
}
.fadeIn {
  opacity: 1;
}
.fadeOut {
  opacity: 0;
}
</style>